<template>
    <div class="mod-config">
        <!--  头部  -->
        <div>
            <!--  搜索内容  -->
            <div style="margin-top: 20px;text-align: center;margin-bottom: 20px">
                <div style="float: left;color: #5ce055">
                    <h3>在职人数</h3>
                    <div>
                        {{sum1}}人
                    </div>
                </div>
                <el-progress
                    type="circle"
                    :percentage="inPeople"
                    :color="colors">
                </el-progress>
                <el-progress
                    type="circle"
                    :percentage="outPeople"
                    :color="colors">
                </el-progress>
                <div style="float: right;color: #fe3950">
                    <h3>离职人数</h3>
                    <div style="font-size: large;font-style: italic">
                        {{sum2}}人
                    </div>
                </div>
            </div>
        </div>
        <!--  主体表格  -->
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="dataListLoading">
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="avater" label="证件照" width="150">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.avater"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户姓名" width="150"></el-table-column>
                <el-table-column prop="birthday" label="生日" width="230" align="center"></el-table-column>
                <el-table-column prop="sex.name" label="性别" width="120" align="center"></el-table-column>
                <el-table-column prop="idCard" label="身份证号" width="280" align="center"></el-table-column>
                <el-table-column prop="ethnic.name" label="民族" width="120" align="center"></el-table-column>
                <el-table-column prop="degree.name" label="学历" width="120" align="center"></el-table-column>
                <el-table-column prop="graduate" label="毕业院校" width="280" align="center"></el-table-column>
                <el-table-column prop="identity.name" label="身份背景" width="120" align="center"></el-table-column>
                <el-table-column prop="domicile.name" label="户籍地" width="120" align="center"></el-table-column>
                <el-table-column prop="address" label="家庭住址" width="380" align="center"></el-table-column>
                <el-table-column prop="organization.name" label="组织" width="200" align="center"></el-table-column>
                <el-table-column prop="job.name" label="岗位" width="200" align="center"></el-table-column>
                <el-table-column prop="account" label="账号(手机号)" width="200" align="center"></el-table-column>
                <el-table-column prop="email" label="电子邮件" width="230" align="center"></el-table-column>
                <el-table-column prop="vx" label="微信" width="230" align="center"></el-table-column>
                <el-table-column prop="contact" label="联系方式" width="250" align="center"></el-table-column>
            </el-table>
            <el-pagination
                    align="left"
                    @current-change="changePage"
                    background
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 一共多少页
            pageSize: 10,
            // 一共多少条
            total: 10,
            // 员工列表
            tableData: [],
            // 表格加载时的动态
            dataListLoading: false,
            //不显示弹窗的关闭按钮
            isClose: false,
            //颜色
            colors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ],
            //在职人数
            sum1:0,
            //离职人数
            sum2:0,
            //在职百分比
            inPeople: 0,
            //离职百分比
            outPeople: 0,
            //所有用户
            allPeople:0
        }
    },
    mounted() {
        let that = this;

        that.getDataList();
    },
    methods: {
        // 时间格式化
        dayjs,
        //获取在职人数
        getInPeopleCount(){
          let that = this;
          that.$http("/user/getAllPeopleCount",'POST',null,(resp)=>{
              let data = resp.data;
              that.allPeople = data.data;
          })
        },
        //单个用户信息
        userInfo(e,message) {
            if (e.avater === null || e.avater === '') {
                if (e.sex === null) {
                    e.avater = require('@/assets/avater-default.jpg');
                } else {
                    if (e.sex.name === '男') {
                        e.avater = require('@/assets/avater_man.png');
                    } else if (e.sex.name === '女') {
                        e.avater = require('@/assets/avater_woman.png');
                    } else {
                        e.avater = require('@/assets/avater-default.jpg');
                    }
                }
            }
            if (e.name === null || e.name === '') {
                e.name = message;
            }
            if (e.birthday === null) {
                e.birthday = message;
            } else {
                e.birthday = dayjs(e.birthday).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.sex === null || e.sex === '') {
                e.sex = {name: message};
            }
            if (e.idCard === null || e.idCard === '') {
                e.idCard = message;
            }
            if (e.ethnic === null || e.ethnic === '') {
                e.ethnic = {name: message};
            }
            if (e.degree === null || e.degree === '') {
                e.degree = {name: message};
            }
            if (e.graduate === null || e.graduate === '') {
                e.graduate = message;
            }
            if (e.identity === null || e.identity === '') {
                e.identity = {name: message};
            }
            if (e.domicile === null || e.domicile === '') {
                e.domicile = {name: message};
            }
            if (e.address === null || e.address === '') {
                e.address = message;
            }
            if (e.organization === null || e.organization === '') {
                e.organization = {name: message};
            }
            if (e.job === null || e.job === '') {
                e.job = {name: message};
            }
            if (e.account === null || e.account === '') {
                e.account = message;
            }
            if (e.email === null || e.email === '') {
                e.email = message;
            }
            if (e.vx === null || e.vx === '') {
                e.vx = message;
            }
            if (e.contact === null || e.contact === '') {
                e.contact = message;
            }
            if (e.createTime === null) {
                e.createTime = message;
            } else {
                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.modifiedTime === null) {
                e.modifiedTime = message;
            } else {
                e.modifiedTime = dayjs(e.modifiedTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.outTime === null) {
                e.outTime = message;
            } else {
                e.outTime = dayjs(e.outTime).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        // 加载表格数据
        getDataList() {
            this.dataListLoading = true;
            let that = this
            let page = that.$router.currentRoute.query.page;
            if (!page) {
                page = 1;
            }
            let roleArray = that.parseStringToArray(localStorage.getItem('roles'), ',')
            if (roleArray.includes('系统管理员')) {
                that.getInPeopleCount();
                that.getAdminList();
            } else {
                that.getNoAdminPeople();
                that.getNoAdminList();
            }
        },
        //加载管理员的表格数据
        getAdminList(){
            let that = this;
            that.$http('/user/getAllOutUserList', 'POST', {
                pageNum: that.currentPage
            }, (resp) => {
                if(resp.data.code === 20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length <= 0){
                        this.currentPage = 1;
                        this.sum2 = 0;
                        this.sum1 = that.allPeople;
                        that.inPeople = 100;
                        that.outPeople = 0;
                        this.reLoadAdminList();
                    }else{
                        let message = '暂无';
                        for (let e of that.tableData) {
                            that.userInfo(e,message);
                        }
                        that.sum1 = that.allPeople - that.tableData.length;
                        that.sum2 = that.tableData.length;
                        that.inPeople = parseFloat((100 - that.sum2 / that.allPeople * 100).toFixed(2));
                        that.outPeople = parseFloat((that.sum2 / that.allPeople * 100).toFixed(2));
                    }
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
                this.dataListLoading = false;
            });
        },
        //重新加载管理员表格数据
        reLoadAdminList(){
            let that = this;
            that.$http('/user/getAllOutUserList', 'POST', {
                pageNum: that.currentPage
            }, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length <= 0) {
                        this.currentPage = 1;
                    } else {
                        let message = '暂无';
                        for (let e of that.tableData) {
                            that.userInfo(e, message);
                        }
                    }
                    this.dataListLoading = false;
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
            })
        },
        //加载非管理员的表格数据
        getNoAdminList(){
            let that = this;
            //获取当前用户的id
            let userId = localStorage.getItem('userId');
            //创建当前管理的组织数组
            let adminArray = [];
            //获取当前用户的id所管理的组织id
            that.$http('/admin/getAdminOrganizations', 'POST', {
                id: userId
            }, (resp) => {
                let data = resp.data;
                if (data.code === 20000) {
                    let list = data.organizations;
                    if (list.length > 0) {
                        for (let i = 0; i < list.length; i++) {
                            adminArray[i] = list[i].organizationId;
                        }
                        this.adminArray = adminArray;
                    }
                    if (adminArray.length <= 0) {
                        this.dataListLoading = false;
                    } else {
                        let summ1 = 0;

                        that.$http('/user/groupOrgOutUserList','POST',{
                            orgIds:adminArray,
                            pageNum:this.currentPage
                        },(resp)=>{
                            if(resp.data.code === 20000){
                                let data = resp.data.data;
                                if(data.list.length <= 0){
                                    this.currentPage = 1;
                                    this.sum2 = 0;
                                    this.reLoadNoAdminList();
                                }
                            }
                            that.tableData = resp.data.data.list;
                            let message = '暂无';
                            for (let e of that.tableData) {
                                that.userInfo(e,message);
                            }
                            that.sum2 = that.tableData.length;
                            that.$http('/user/groupOrgUserList','POST',{
                                orgIds:adminArray,
                                pageNum:this.currentPage
                            },(resp)=>{
                                if(resp.data.code === 20000){
                                    let data = resp.data.data;
                                    if(data.list.length <= 0){
                                        this.currentPage = 1;
                                        this.sum1 = 0;
                                    }
                                }
                                summ1 = resp.data.data.list.length;
                                let all = summ1+that.sum2;
                                that.inPeople = parseFloat((100 - that.sum2 / all * 100).toFixed(2));
                                that.outPeople = parseFloat((that.sum2 / all * 100).toFixed(2));
                            })
                            that.currentPage = resp.data.data.currentPage;
                            that.pageSize = resp.data.data.pageSize;
                            that.total = resp.data.data.total;
                            this.dataListLoading = false;
                        })
                    }
                }
            });
        },
        //重新加载非管理员的表格数据
        reLoadNoAdminList(){
            let that = this;
            that.$http('/user/groupOrgOutUserList','POST',{
                orgIds:this.adminArray,
                pageNum:this.currentPage
            },(resp)=>{
                if(resp.data.code === 20000) {
                    let data = resp.data.data;
                    if (data.list.length <= 0) {
                        this.currentPage = 1;
                    } else {
                        that.tableData = resp.data.data.list;
                        let message = '暂无';
                        for (let e of that.tableData) {
                            that.userInfo(e, message);
                        }
                    }
                    this.dataListLoading = false;
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
            })
        },
        //加载非管理员下的人数
        getNoAdminPeople(){
            let that = this;
            //获取当前用户的id
            let userId = localStorage.getItem('userId');
            //创建当前管理的组织数组
            let adminArray = [];
            //获取当前用户的id所管理的组织id
            that.$http('/admin/getAdminOrganizations', 'POST', {
                id: userId
            }, (resp) => {
                let data = resp.data;
                if (data.code === 20000) {
                    let list = data.organizations;
                    if (list.length > 0) {
                        for (let i = 0; i < list.length; i++) {
                            adminArray[i] = list[i].organizationId;
                        }
                        this.adminArray = adminArray;
                    }
                    if (adminArray.length <= 0) {
                        this.dataListLoading = false;
                    } else {
                        that.$http('/user/groupOrgUserList','POST',{
                            orgIds:adminArray,
                            pageNum:this.currentPage
                        },(resp)=>{
                            if(resp.data.code === 20000){
                                let data = resp.data.data;
                                if(data.list.length <= 0){
                                    this.currentPage = 1;
                                    this.sum1 = 0;
                                }
                            }
                            that.sum1 = resp.data.data.list.length;
                        })
                    }
                }
            });
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            if(this.isSearch){
                this.search();
            }else{
                this.getDataList();
            }
        },
        //替换树节点
        replaceEmptyChildrenWithNull(obj) {
            if (Array.isArray(obj)) {
                for (const item of obj) {
                    this.replaceEmptyChildrenWithNull(item);
                }
            } else if (typeof obj === 'object' && obj !== null) {
                for (const key in obj) {
                    if (key === 'children' && Array.isArray(obj[key]) && obj[key].length === 0) {
                        obj[key] = null;
                    } else {
                        this.replaceEmptyChildrenWithNull(obj[key]);
                    }
                }
            }
        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>